<template>
  <div class="quick-content" v-loading="categoryLoading">
<!--    快速就业-->
    <div class="policy-position">
      <div class="block"></div>
      <div class="title" style="font-family: 'fzhzgbjianti';">
        快速就业
      </div>
    </div>
    <div class="content">
      <div class="left-block">
        <div class="title" style="font-family: 'fzhzgbjianti';">求职意向</div>
        <div class="text">
          {{ text }}
        </div>
        <div class="text">
          {{ text1 }}
        </div>
      </div>
      <div class="right-block">
        <div class="title" style="font-family: 'fzhzgbjianti';">
          求职意向填写
        </div>
        <div class="middle-block">
          <div class="policy">
            <div class="introduce" >期望职位</div>
            <div class="info-box">
<!--              <el-cascader-->
<!--                  v-model="form.jobType"-->
<!--                  :options="category"-->
<!--                  :props="optionProps"-->
<!--                  :show-all-levels="false"-->
<!--                  class="el-buttons"-->
<!--                  style="width: 260px;height: 50px; border-radius: 60px;background-color: #F5F6F7;"-->
<!--                  @change="handleChange"-->
<!--              ></el-cascader>-->

              <el-select class="a1" v-model="form.jobType"  style="width: 260px;height: 50px; border-radius: 60px;background-color: #F5F6F7;"  placeholder="请选择">
                <el-option
                    v-for="item in category"
                    :key="item.id"
                    :label="item.jobTitle"
                    :value="item.id"
                    class="el-buttons"
                >
                </el-option>
              </el-select>
            </div>
          </div>
<!--          <div class="policy">-->
<!--            <div class="introduce">期望地点</div>-->
<!--            <div class="block">-->
<!--              <el-cascader-->
<!--                  v-model="form.address"-->
<!--                  :options="options_my"-->
<!--                  :props="{ expandTrigger: 'hover' }"-->
<!--                  @change="handleChange_my"-->
<!--                  class="el-buttons">-->
<!--              </el-cascader>-->
<!--            </div>-->
<!--          </div>-->
          <div class="policy">
            <div class="introduce">期望地点</div>
            <el-select class="a1" v-model="form.wage"  style="width: 260px;height: 50px; border-radius: 60px;background-color: #F5F6F7;"  placeholder="请选择">
              <el-option
                  v-for="item in options2"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                  class="el-buttons"
              >
              </el-option>
            </el-select>
          </div>
<!--          <div class="policy">-->
<!--            <div class="introduce">职位分类</div>-->
<!--            <el-select class="a1" v-model="form.position" placeholder="请选择期望职位" style="width: 400px;height: 40px; border-radius: 60px;background-color: #F5F6F7;">-->
<!--              <el-option-->
<!--                  v-for="item in options3"-->
<!--                  :key="item.value3"-->
<!--                  :label="item.label3"-->
<!--                  :value="-->
<!--                  item.value3"-->
<!--                  class="el-buttons"-->
<!--              >-->
<!--              </el-option>-->
<!--            </el-select>-->
<!--          </div>-->
        </div>
        <div class="btn" @click="skip()">快速就业</div>
      </div>
    </div>

  </div>
</template>

<script>

import {
  findJobNameApi,
  getSalaryListApi,
} from "@/api/quick";
import {validate} from "@/utils/validate";
export default {
  name: "Quick",
  data(){
    return{
      form:{
        jobType:'',
        address:'',
        wage: '',
        position:''
      },
      rule:{
        jobType:{
          name:'期望职位',
          required:true,
        },
        // address: {
        //   name: '期望地点',
        //   required: true
        // },
        wage: {
          name: '期望地点',
          required: true
        },
        // position: {
        //   name: '职位分类',
        //   required: true
        // },
      },
      categoryLoading:false,
      value_my: [],
      options_my: [{
        value: 'zhinan',
        label: '甘肃省',
        children: [{
          value: 'shejiyuanze',
          label: '酒泉市',
          children: [{
            value: 'yizhi',
            label: '肃州区'
          },]
        }, {
          value: 'daohang',
          label: '其他',
          children: [{
            value: 'cexiangdaohang',
            label: '其他'
          },]
        }]
      }, ],
      category:[
        {
          id: 1,
          jobTitle: ''
        }
      ],
      optionProps: {
        value: 'id',
        label: 'jobTitle',
        children: 'subLevelModelList',
      },
      options2:[
        {
          id: '',
          data: '示例：东南街街道'
        }
      ],
      options3:[
        {
          value3: 1,
          label3: '全职'
        },
        {
          value3:  2,
          label3: '兼职'
        }
      ],
      value2:'',
      value3:'',
      page:1,
      limit:6,
      noticeList:[],
      text:'求职意向就是根据个⼈的爱好和能⼒，对⾃⼰进⾏职业规划，明确⾃⼰所要从事的职业，从⽽有针对性的去寻找合适的⼯作。明确求职意向，是⼀个⼈找⼯作的第⼀步。',
      text1:'想要找⼯作，就快来填写求职意向吧，能⾃动为您快速匹配岗位！'
    }
  },
  methods:{
    skip(){

      if(validate(this.form,this.rule)){
      this.$router.push({ name: 'Result',params:{jobLevel:1,streetId:this.form.wage,jobType:this.form.jobType,type:this.form.position,level:this.category.level}  })
      }
    },
    // handleChange(jobType) {
    //   if (jobType.length === 3) {
    //     this.jobType = jobType[2] ?? '';
    //     this.jobLevel = 3;
    //   }
    //   if (jobType.length === 2) {
    //     this.jobType = jobType[1] ?? '';
    //     this.jobLevel = 2;
    //   }
    //   if (jobType.length === 1) {
    //     this.jobType = jobType[0] ?? '';
    //     this.jobLevel = 1;
    //   }
    // },
    handleChange_my(value) {
      // console.log(value);
    },
    // 职位分类
    findJobName(){
      this.categoryLoading=true
      findJobNameApi({}).then((res)=>{
        this.category = res
      }).finally(()=>{
        this.categoryLoading = false
      })
    },
    // 期望地点
    getSalaryList() {
      this.categoryLoading=true
      getSalaryListApi({streetId:1}).then((res) => {
        this.options2 = res
      }).finally(()=>{
        this.categoryLoading = false
      })
    },
  },
  mounted() {
    this.utils.createParams(this,this.$route.params);
    this.findJobName()
    this.getSalaryList()
  },
}
</script>

<style lang="scss" scoped>
.quick-content{
  .policy-position{
    width: 800px;
    height: 70px;
    background-color: #fff;
    color: #498CF3;
    padding: 0 30px;
    border-radius: 20px;
    margin: 30px auto;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    //padding: 0 1;
    .block{
      background-color: #498CF3;
      width: 10px;
      height: 37px;
      border-radius: 15px;
      margin-right: 15px;
    }
    .title{
      font-size: 25px;
      padding-top: 3px;
      //font-weight: 900;
      //padding-bottom: 3px;
    }
  }
  .content{
    width: 800px;
    margin: 30px auto;
    //display: flex;
    //justify-content: space-between;
    .left-block{
      box-sizing: border-box;
      width: 800px;
      height: 500px;
      width: 800px;
      padding: 70px 20px;
      background: url("@/assets/Quick/background.png") no-repeat;
      background-size: 800px 605px;
      border-radius: 20px;
      .title{
        color: #498CF3;
        font-size: 36px;
        //font-weight: 900;
        //margin-bottom: 30px;
        margin: 15px 0;
        text-align: center;
      }
      .text{
        line-height: 70px;
        font-size: 25px;
        text-indent: 2em;
      }
    }
    .right-block{
      box-sizing: border-box;
      width: 800px;
      height: 500px;
      padding: 20px 20px;
      margin: 30px auto;
      border-radius: 20px;
      background: #fff;
      .title{
        color: #498CF3;
        font-size: 36px;
        //font-weight: 900;
        margin: 15px 0;
        text-align: center;
      }
      .middle-block{
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        box-sizing: border-box;
        font-size: 20px;
        width: 100%;
        height: 70%;
        padding: 0 100px;
        margin-top: 30px;
        .policy{
          width: 50%;
          height: 20%;

        }
        .introduce{
          margin: 0 0 15px 10px;
          font-size: 30px;
        }
        .el-select{
          input{
            background-color: red;
          }
        }
        .el-input,
        el-input--suffix{
          width: 900px;
          height: 100px;
          background-color: red;
          border-radius: 60px;
        }
        .el-input__inner{
        }
        .el-buttons{
          width: 400px;
          height: 100%;
        }
        input{
          width: 390px;
          height: 45px;
          border-radius: 60px;
          border: none;
          background-color: #F5F6F7;
          font-size: 30px;
          padding-left: 15px;
        }
      }
      .btn{
        margin: 0 auto;
        text-align: center;
        line-height: 50px;
        cursor: pointer;
        width: 150px;
        height: 50px;
        border-radius: 30px;
        background-color: #498CF3;
        font-size: 20px;
        color: #fff;
      }
    }
  }
}
</style>
